<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节流</title>
</head>
<style>
    .ul{
        width: 800px;
        height: 800px;
        margin: 0 auto;
        overflow: auto;
        background: salmon;
    } 
    .ul li{
        line-height: 200px;
    }
</style>
<body>
    <ul class="ul">
        <li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </li>
    </ul>
</body>
<script>
// 节流: n 秒内只运⾏⼀次，若在 n 秒内重复触发，只有⼀次⽣效
let ul = document.querySelector('.ul')
let timer = null  //给timer一个初始值 null  或者 let timer
ul.onscroll =function(){
    // console.log('1');
    // ul.style.background = '#'+Math.random().toString(16).slice(2,8)

        // if(timer){ //不到1秒执行的滚动直接return
        //     return 
        // }
        //  timer = setTimeout(()=>{
        //     ul.style.background = '#'+Math.random().toString(16).slice(2,8)
        //     timer = null
        // },1000)


    if(!timer){
        timer = setTimeout(()=>{
            ul.style.background = '#'+Math.random().toString(16).slice(2,8)
            timer = null
        },1000)
    }


}


</script>
</html>